<template>
  <section
    :class="keys % 2 === 0 ? '' : 'card'"
    class="cardType"
    v-if="listType === 1"
    @click="$commonJs.goPage('goodsDetail', info.id)"
  >
    <img :src="$api.imgUrl + JSON.parse(info.img)[0]" alt="" />
    <div class="content">
      <span class="tag"></span>
      <span class="name">{{ info.name }}</span>
      <span class="money">￥{{ info.price }}</span>
    </div>
  </section>
  <section
    class="listType"
    v-else
    @click="$commonJs.goPage('goodsDetail', info.id)"
  >
    <img :src="$api.imgUrl + JSON.parse(info.img)[0]" alt="" />
    <div class="content">
      <span class="name">{{ info.name }}</span>
      <span class="tag"></span>
      <span class="money">￥{{ info.price }}</span>
    </div>
  </section>
</template>

<script>
export default {
  name: "card",
  props: {
    info: {
      type: Object
    },
    keys: {
      type: Number
    }
  },
  computed: {
    listType() {
      return this.$store.state.listType;
    }
  }
};
</script>

<style scoped lang="stylus">
section{
  margin-top 10px
  display inline-block;
  box-sizing border-box;
  box-shadow: 0 0 30px rgba(216, 216, 216, 0.8);
  border-radius:16px;
  background #ffffff
}
.card{
  margin-right 10px
}
  .cardType {
    width calc(50% - 5px)
    img{
      width 100%
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;
    }
    .content{
      border-top 1px solid #f0f0f0
      text-align left
      padding 17px 10px 17px 28px
      font-size 24px
      .name{
        color #666666
      }
      .money{
        display block;
        text-align right
        color #ED721B
        margin-top 32px
      }
    }
  }
  .listType{
    width 100%
    flex_content();
    img{
      width auto
      height 220px
      border-top-left-radius: 16px;
      border-bottom-left-radius: 16px;
    }
    .content{
      display inline-block;
      padding 22px 12px 38px 22px
      font-size 24px
      flex_content();
      flex_column();
      flex_justify_space()
      .name{
        color #666666
      }
      .money{
        color #ED721B
      }
    }
  }
</style>
